<template>
    <n-card class="mx-2 my-10 w-80 h-80" hoverable>
        <div class="my-2">
            <span class="text-2xl">{{ data.name }}<span class="text-lg mx-2 text-slate-500">{{ data.item_type }}</span></span>
        </div>
        <div class="flex items-center">
            <n-icon size="18" color='rgb(0,63,152)'>
                <CalendarClock24Filled />
            </n-icon>
            <span class="text-sm mx-2">
                {{data.start_date}}-{{ data.end_date }}
            </span>
        </div>
        <div class="bg-blue-400 h-1 w-full"></div>

        <div class="flex flex-col items-center w-full bg-slate-100 rounded-md">
            <n-icon class="mx-2" size="60" color='rgb(0,63,152)'>
                <StockOutlined />
            </n-icon>
            <span class="text-lg bg-blue-100 rounded-md text-black p-2 my-2">
                股票名称：{{ data.stock_name }}
            </span>
        </div>
        <span class="text-sm">
            {{ data.description }}
        </span>
        <n-flex justify="center" class="absolute bottom-0 left-0 w-full mb-4">
            <n-button type="error">删除</n-button>
            <n-button type="primary">编辑</n-button>
        </n-flex>
    </n-card>
</template>

<script setup>
import { CalendarClock24Filled } from '@vicons/fluent';
import { StockOutlined } from '@vicons/antd';

const props = defineProps(["data"]);

</script>